<template>
  <div>
    <h1>{{ count }}</h1>
    <h1>{{ msg }}</h1>
    <h1>{{ count }}的平方是{{ squ }}</h1>
    <button @click="btn">改变msg</button><br />
    <button @click="asyncFn">异步改变count</button>
    <button @click="btt">点击触发</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  computed: {
    ...mapState(["count", "msg"]),
    squ() {
      return this.$store.getters.squCount;
    },
  },
  methods: {
    ...mapGetters(["squCount"]),
    // 第二种mutations调用方式
    ...mapActions(["asyncAddCount"]),
    ...mapMutations(["changeMsg"]),
    btn() {
      // 第一种mutations调用方式
      // this.$store.commit('wuhao','wuhao')
      this.changeMsg("wuhao");
    },
    asyncFn() {
      // this.$store.dispatch("asyncAddCount");
      // this.$store.dispatch("asyncAddCount", 20);
      this.asyncAddCount(100);
    },
    btt() {
      console.log(this.squCount());
    },
  },
};
</script>

<style>
</style>